$per_each: calc(100% / 24);

@mixin flex_row {
  display: flex;
}

@mixin flex_col {
  @include flex_row;
  flex-direction: column;
}

.flex_row {
  @include flex_row
}

.flex_col {
  @include flex_col
}

.flex_row_sta_cen {
  @include flex_row;
  @extend .jc_sta;
  @extend .ai_cen;
}

.flex_row_cen {
  @include flex_row;
  @extend .jc_cen;
  @extend .ai_cen
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_nowrap {
  flex-wrap: nowrap;
}

.flex_rev {
  flex-wrap: wrap-reverse;
}

.jc_cen {
  justify-content: center;
}

.jc_sta {
  justify-content: flex-start;
}

.jc_end {
  justify-content: flex-end;
}

.jc_spa_ard {
  justify-content: space-around;
}

.jc_spa_bet {
  justify-content: space-between;
}

.ai_cen {
  align-items: center;
}

.ai_sta {
  align-items: flex-start;
}

.ai_end {
  align-items: flex-end;
}

.ai_base {
  align-items: baseline;
}

.ai_str {
  align-items: stretch;
}

.ac_sta {
  align-content: flex-start;
}

.ac_end {
  align-content: flex-end;
}

.ac_cen {
  align-content: center;
}

.ac_base {
  align-content: baseline;
}

.ac_str {
  align-content: stretch;
}

.order_0 {
  order: 0;
}

.order_1 {
  order: 1
}

.order_2 {
  order: 2
}

.order_3 {
  order: 3
}

.order_4 {
  order: 4
}

.order_5 {
  order: 5
}

.order_6 {
  order: 6
}

.order_7 {
  order: 7
}

.order_8 {
  order: 8
}

.order_9 {
  order: 9
}

.order_10 {
  order: 10
}

.order_11 {
  order: 11
}

.order_12 {
  order: 12
}

.order_13 {
  order: 13
}

.order_14 {
  order: 14
}

.order_15 {
  order: 15
}

.order_16 {
  order: 16
}

.order_17 {
  order: 17
}

.order_18 {
  order: 18
}

.order_19 {
  order: 19
}

.order_20 {
  order: 20
}

.as_sta {
  align-self: flex-start;
}

.as_end {
  align-self: flex-end;
}

.as_cen {
  align-self: center;
}

.as_base {
  align-self: baseline;
}

.as_str {
  align-self: stretch;
}

.as_auto {
  align-self: auto;
}

.flex_1 {
  flex: 1;
}

.cols_1 {
  width: calc(#{$per_each} * 1);
}

.cols_2 {
  width: calc(#{$per_each} * 2);
}

.cols_3 {
  width: calc(#{$per_each} * 3);
}

.cols_4 {
  width: calc(#{$per_each} * 4);
}

.cols_5 {
  width: calc(#{$per_each} * 5);
}

.cols_6 {
  width: calc(#{$per_each} * 6);
}

.cols_7 {
  width: calc(#{$per_each} * 7);
}

.cols_8 {
  width: calc(#{$per_each} * 8);
}

.cols_9 {
  width: calc(#{$per_each} * 9);
}

.cols_10 {
  width: calc(#{$per_each} * 10);
}

.cols_11 {
  width: calc(#{$per_each} * 11);
}

.cols_12 {
  width: calc(#{$per_each} * 12);
}

.cols_13 {
  width: calc(#{$per_each} * 13);
}

.cols_14 {
  width: calc(#{$per_each} * 14);
}

.cols_15 {
  width: calc(#{$per_each} * 15);
}

.cols_16 {
  width: calc(#{$per_each} * 16);
}

.cols_17 {
  width: calc(#{$per_each} * 17);
}

.cols_18 {
  width: calc(#{$per_each} * 18);
}

.cols_19 {
  width: calc(#{$per_each} * 19);
}

.cols_20 {
  width: calc(#{$per_each} * 20);
}

.cols_21 {
  width: calc(#{$per_each} * 21);
}

.cols_22 {
  width: calc(#{$per_each} * 22);
}

.cols_23 {
  width: calc(#{$per_each} * 23);
}

.cols_24 {
  width: calc(#{$per_each} * 24);
}


